import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../util/ColorHelper.dart';

class InputComponent {
  static Widget getInput(
      {required Rx<InputModel> model,
      Function()? onObscureToggled,
      Function()? onSuffixPressed}) {
    return ObxValue(
        (obs) => _buildInput(obs.value,
            onObscureToggled: onObscureToggled,
            onSuffixPressed: onSuffixPressed),
        model);
  }

  static Widget _buildInput(InputModel model,
          {Function()? onObscureToggled, Function()? onSuffixPressed}) =>
      Container(
        child: TextField(
          focusNode: model.focusNode,
          controller: model.controller,
          decoration: InputDecoration(
              isCollapsed: false, // whether expand to its parent
              contentPadding: EdgeInsets.symmetric(
                  horizontal: model.hInputPadding.w,
                  vertical: model.vInputPadding.h),
              border: OutlineInputBorder(
                  borderSide: BorderSide.none,
                  borderRadius: BorderRadius.circular(model.isRound
                      ? max(max(model.vInputPadding, model.hInputPadding) * 10,
                          100)
                      : model.inputRadius.r)),
              hintText: model.hint ?? '',
              hintStyle: TextStyle(
                  color: model.hintColor ?? ColorHelper.grayBg,
                  fontSize: 14.sp),
              prefixIcon: model.prefixIcon,
              suffixIcon: model.isPwd
                  ? IconButton(
                      onPressed: () {
                        onObscureToggled?.call();
                      },
                      icon: Icon(
                        model.showPwd ? Icons.visibility : Icons.visibility_off,
                      ),
                    )
                  : model.suffixIcon != null
                      ? IconButton(
                          onPressed: () {
                            onSuffixPressed?.call();
                          },
                          icon: model.suffixIcon!)
                      : null,
              fillColor: model.bg ?? ColorHelper.grayEB,
              filled: true),
          inputFormatters: [LengthLimitingTextInputFormatter(model.maxLength)],
          maxLines: model.maxLine,
          obscureText: model.isPwd && !model.showPwd,
          keyboardType:
              model.isPwd ? TextInputType.visiblePassword : model.inputType,
          textAlign: model.textAlign,
          // when add a prefix/suffix, it might cause the input not in the center
          textAlignVertical: TextAlignVertical.center,
          style: const TextStyle(color: ColorHelper.black),
        ),
      );
}

class InputModel {
  FocusNode? focusNode;
  TextEditingController? controller;
  String? hint;
  Color? hintColor;
  int maxLength;
  bool isPwd;
  bool showPwd;
  TextInputType? inputType;
  TextAlign textAlign;
  double vInputPadding;
  double hInputPadding;
  bool isRound;
  Widget? prefixIcon;
  Widget? suffixIcon;
  double inputRadius;
  int maxLine;
  Rx<bool> offStage;
  Color? bg;
  InputModel(
      {this.focusNode,
      this.controller,
      this.hint,
      this.hintColor,
      this.maxLength = 11,
      this.isPwd = false,
      this.showPwd = false,
      this.inputType,
      this.textAlign = TextAlign.start,
      this.vInputPadding = 10,
      this.hInputPadding = 10,
      this.isRound = false,
      this.prefixIcon,
      this.suffixIcon,
      this.inputRadius =
          48, // icon default size 24 / iconButton default size 48
      this.maxLine = 1,
      bool offStage = false,
      this.bg})
      : offStage = offStage.obs;
}

extension RxInputModelExtension on Rx<InputModel> {
  TextEditingController? get controller => value.controller;
}
